<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>EaselJS Example: Double Click Example</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>

	<script src="../lib/easeljs-NEXT.combined.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<script id="editable">
	function init() {
		//find canvas and load images, wait for last image to load
		var canvas = document.getElementById("testCanvas");
		var stage = new createjs.Stage(canvas);

		// Create a new Text object and a rectangle Shape object, and position them inside a container:
		var container = new createjs.Container();
		container.x = 100;
		container.y = 80;

		var target = new createjs.Shape();
		target.graphics.beginFill("#F00").drawRect(-10, -10, 300, 60).beginFill("#FFF");
		container.addChild(target);

		var txt = new createjs.Text("Double Click Me!", "36px Arial", "#FFF");
		txt.textBaseline = "top";
		container.addChild(txt);

		stage.addChild(container);

		container.on("dblclick", function (evt) {
			alert("Double Clicked the container object");
		});

		stage.update();
	}

</script>
</head>

<body onload="init();">
<header class="EaselJS">
	<h1>Double Click Example</h1>

	<p>An example to show how to use the <code>dblclick</code> event.</p>
</header>

<div>
	<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</body>
</html>
